<template>
   <div class="box">
        <div ref="lineEchart" id="lineEchart" class="echart"></div>
        <div ref="bargraphChart" id="bargraphChart" class="echart" ></div>
        <div class="box_bg"></div>
   </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { ref , nextTick } from "vue";


const lineEchart = ref(null);
const bargraphChart = ref(null);

var lineOption = {
    color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
    title: {
      text: ''
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      data: ['车流量', '用电量', '用水量'],
      textStyle:{
          color:"#fff"
      }
    },
    toolbox: {
      feature: {
        // saveAsImage: {}
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: ['5.11', '5.12', '5.13', '5.14', '5.15', '5.16', '5.17'],
        axisLabel:{
            color:"#fff"
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisLabel:{
            color:"#fff"
        }
      }
    ],
    series: [
      {
        name: '车流量',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(128, 255, 165)'
            },
            {
              offset: 1,
              color: 'rgb(1, 191, 236)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: [140, 232, 101, 264, 90, 340, 250]
      },
      {
        name: '用电量',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(0, 221, 255)'
            },
            {
              offset: 1,
              color: 'rgb(77, 119, 255)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: [120, 282, 111, 234, 220, 340, 310]
      },
      {
        name: '用水量',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(55, 162, 255)'
            },
            {
              offset: 1,
              color: 'rgb(116, 21, 219)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: [320, 132, 201, 334, 190, 130, 220]
      },
    ]
  };


var bargraphChartOption = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // Use axis to trigger tooltip
      type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
    }
  },
  legend: {
    textStyle:{
        color:"#fff"
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value'
  },
  axisLabel:{
      color:"#fff"
  },
  yAxis: {
    type: 'category',
    data: [ '视频设备', '门禁设备', '消防设备', '温湿度探测器', '红外对射设备', '巡检设备']
  },
  yxisLabel:{
      color:"#fff"
  },
  series: [
    {
      name: '正常运行',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [320, 302, 301, 334, 390, 330]
    },
    {
      name: '故障',
      type: 'bar',
      stack: 'total',
      label: {
        show: true,
        textStyle:{
            color:"rgb(150,27,77)"
        }
      },
      emphasis: {
        focus: 'series'
      },
      data: [12, 13, 21, 22, 31, 22]
    },
    
  ]
};


nextTick( () => {
    let line = echarts.init(lineEchart.value);
    line.setOption(lineOption);

    let bargraph = echarts.init(bargraphChart.value);
    bargraph.setOption(bargraphChartOption);
    

})







</script>
<style  scoped>
    .box{
        width: 240px;
        height: 540px;
        border-radius: 2px;
    }   
    .box_bg{
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.2);
        filter: blur(1px);
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: -1;
    }

    .echart{
        width: 96%;
    }

    #lineEchart{
        height: 200px;
        margin: 10px;
    }

    #bargraphChart{
        height: 220px;
        margin:50px 10px 10px;
    }
</style>